{extend name="template/base" /}
{block name="content"}
<div class="page-container">
    <div class="cl pd-5 bg-1 bk-gray">
        人数为角色1和角色2的跨度值，处理角色2为超过人数后可选角色，为非必填选项。
    </div>
    <form class="form form-horizontal" id="form" method="post" action="{:\\think\\Request::instance()->baseUrl()}">
        <input type="hidden" name="id" value="{$vo.id ?? ''}">
        <div class="row cl">
            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>名称：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <input type="text" class="input-text" placeholder="名称" name="nature" value="{$vo.nature ?? ''}"  datatype="*" nullmsg="请填写名称">
            </div>
            <div class="col-xs-2 col-sm-2"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>人数：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <input type="number" class="input-text" step="1" max="1000" min="1" name="number" value="{$vo.number ?? 10}">
                设置人数以下(包含)为角色1处理，设置人数以上为角色2处理
            </div>
            <div class="col-xs-2 col-sm-2"></div>
        </div>
        <input type="hidden" name="json_str" value="{$vo.json_str??''}">
        <div class="row cl">
            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>处理流程：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <table class="table table-border table-bordered table-hover table-bg" style=" width:100%;" id="caseProcess">
                    <thead>
                    <tr class="text-c">
                        <th>流程</th>
                        <th>处理角色1</th>
                        <th>流转次数(最多9次)</th>
                        <th>处理角色2</th>
                        <th>流转次数(最多9次)</th>
                        <td></td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>流程1</td>
                        <td>案件录入</td>
                        <td>1</td>
                        <td></td>
                        <td>1</td>
                        <td>不可删除</td>
                    </tr>
                    <tr>
                        <td>流程2</td>
                        <td>案件分配</td>
                        <td>1</td>
                        <td></td>
                        <td>1</td>
                        <td>不可删除</td>
                    </tr>
                    {volist name="json_arr" id="it"}
                    <tr>
                        <td>流程</td>
                        <td>
                            <select class="select" data-id="{$it.role1}" data-name="role" style="width:120px;">
                                <option value="0">请选择受理角色</option>
                                {$role}
                            </select>
                        </td>
                        <td><input type="number" class="input-text" step="1" max="9" min="1" value="{$it.num1}"></td>
                        <td>
                            <select class="select" data-id="{$it.role2}" data-name="role" style="width:120px;">
                                <option value="0">请选择受理角色</option>
                                {$role}
                            </select>
                        </td>
                        <td><input type="number" class="input-text" step="1" max="9" min="1" value="{$it.num2}"></td>
                        <td>
                            <button type="button" class="btn btn-danger radius" onclick="rmCaseProcess(this)"> 删除 </button>
                        </td>
                    </tr>
                    {/volist}
                    </tbody>
                    <tfoot>
                    <tr>
                        <td>流程末</td>
                        <td>
                            <select class="select" data-id="{$json_last.role1??0}" data-name="role" style="width:120px;">
                                <option value="0">请选择受理角色</option>
                                {$role}
                            </select>
                        </td>
                        <td>1</td>
                        <td>
                            <select class="select" data-id="{$json_last.role2??0}" data-name="role" style="width:120px;">
                                <option value="0">请选择受理角色</option>
                                {$role}
                            </select>
                        </td>
                        <td>1</td>
                        <td>不可删除</td>
                    </tr>
                    </tfoot>
                </table>
                <br/>

            </div>
            <div class="col-xs-2 col-sm-2"></div>
        </div>

        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-2 col-sm-offset-2">
                <button type="submit" class="btn btn-primary radius">&nbsp;&nbsp;提交保存&nbsp;&nbsp;</button>
                <button type="button" class="btn btn-success radius ml-20" onclick="addCaseProcess()">&nbsp;&nbsp;添加流程&nbsp;&nbsp;</button>
                <button type="button" class="btn btn-default radius ml-20" onClick="layer_close();">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
            </div>
        </div>
    </form>
</div>
{/block}

{block name="script"}
<script type="text/javascript" src="__LIB__/Validform/5.3.2/Validform.min.js"></script>
<script>
    $(function () {
        $('input[name=is_mediate][value={$vo.is_mediate??1}]').prop('checked',true);

        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        $("#form").Validform({
            tiptype: 2,
            ajaxPost: true,
            showAllError: true,
            beforeSubmit:function(){
                var data = [];
                var num1,num2;
                var table = $('#caseProcess');
                $('tbody tr',table).each(function(index){
                    if( 1 < index ) {
                        num1 = parseInt($('td:eq(2) input',this).val())||1;
                        num2 = parseInt($('td:eq(4) input',this).val())||1;
                        9 < num1 && (num1 = 1);
                        9 < num2 && (num2 = 1);
                        data.push({
                            role1:$('td:eq(1) select',this).val(),
                            role2:$('td:eq(3) select',this).val(),
                            num1:num1,
                            num2:num2,
                        });
                    }
                });
                data.push({
                    role1:$('tfoot td:eq(1) select',table).val(),
                    role2:$('tfoot td:eq(3) select',table).val(),
                    num1:1,
                    num2:2,
                });
                $('input[name="json_str"]').val(JSON.stringify(data));
                return true;
            },
            callback: function (ret){
                ajax_progress(ret);
            }
        });
        if( '{$vo.id??0}' !== '0' ) {
            $('select[data-name=role]').each(function(){
                $('option[value='+$(this).data('id')+']',this).prop('selected',true);
            });
        }
    });
    function addCaseProcess() {
        var table = $('#caseProcess'),
            len = $('tbody tr',table).length+1;
        if( len > 6 ) {
            return false;
        }
        var new_tr = $('tfoot tr',table).eq(0).clone();
        new_tr.find('td:eq(0)').html('流程'+len);
        new_tr.find('td:eq(2)').html('<input type="number" class="input-text" step="1" max="9" min="1" value="1">');
        new_tr.find('td:eq(4)').html('<input type="number" class="input-text" step="1" max="9" min="1" value="1">');
        new_tr.find('td:eq(5)').html('<button type="button" class="btn btn-danger radius" onclick="rmCaseProcess(this)"> 删除 </button>');
        $('tbody',table).append(new_tr);
    }
    function rmCaseProcess(that) {
        $(that).parents('tr:first').remove();
        $('#caseProcess tbody tr').each(function(index){
            index += 1;
            $('td:eq(0)',this).html('流程'+index);
        });
    }
</script>
{/block}
